<template>
  <div>
    <el-tabs style="margin: 0 20px;"  v-model="activeTab" type="border-card" >
				
				<el-tab-pane :disabled="isClone" v-if="!(tabHideList.indexOf('9')>-1)" name="9" label="部署模式" style="padding: 20px;">
			  	<deployModel 
			  		ref="deployModel"
			  		:readOnly="false"
			  		@change="(name,v,allList)=>{formData.deployModel = v.deployModel}"
			  		></deployModel>
			  </el-tab-pane>
			  
			  <el-tab-pane v-if="!(tabHideList.indexOf('0')>-1)" name="0" label="基础信息" style="padding: 20px;">
			  	<el-form 
			  		ref="deployForm" 
			  		:model="formData" 
			  		:rules="fromRule" 
			  		label-width="120px" >
			  		<el-form-item
			  			 label="应用名称：" prop="appName">
			  			<baseInput ref="name" style="" :defaultValue="formData.appName" placeholder="请输入应用名称" @change="(name,v)=>{this.formData.appName=v}"></baseInput>
			  		</el-form-item>
			  		<el-form-item label="所属集群：" prop="clusterName">
			  				<jiqunSelect ref="jiqunSelect" :defaultValue="formData.clusterName" @change="changeJQ"></jiqunSelect>
			  		</el-form-item>
			  		<el-form-item 
			  			v-show="templateType!=2&&deployType!=2&&!isBpDeploy"
			  			label="自动分配IP：" prop="needips">
			  				<el-switch
			  					@change="changeDeployFormRules"
								  v-model="formData.needips"
								  active-text="是"
								  inactive-text="否"> 
								</el-switch>
			  		</el-form-item>
			  		<el-form-item v-show="!formData.needips" label="目标主机：" prop="ipsString" >
			  				<zhujiIpTransfer
			  					:defaultValue="formData.ips"
			  					:disabledValues="formData.disabledIps"
			  					ref="zhujiIpTransfer"
			  					@change="(name,arr)=>{formData.ips=arr.map(el=>el.ip);formData.ipsString=formData.ips.join(',')}"></zhujiIpTransfer>
			  		</el-form-item>
			  	</el-form>
			  </el-tab-pane>
			  
			  <el-tab-pane :disabled="isClone" v-if="!(tabHideList.indexOf('1')>-1)" name="1" label="实例规格" style="padding: 20px;">
			  	<shiliGuigeRadio
			  		:defaultValue="formData.varsInfoShili[0].varsValue"
			  		@change="(name,v)=>{formData.varsInfoShili = [{varsName:v.name,varsValue:v.value,varsType:6}]}"
			  		></shiliGuigeRadio>
			  </el-tab-pane>
			  
			  <el-tab-pane :disabled="isClone" v-if="!(tabHideList.indexOf('2')>-1)" name="2" label="配置文件" style="padding: 20px;">
			  	<configFile
			  		ref="configFile"
			  		@change="(name,v)=>{formData.templateConfigs=v}"
			  		></configFile>
			  </el-tab-pane>
			  
			  <el-tab-pane :disabled="isClone" v-if="!(tabHideList.indexOf('3')>-1)" name="3" label="端口映射" style="padding: 20px;">
			  	<port
			  		ref="port"
			  		:deployType="deployType"
			  		@change="(name,v)=>{formData.varsInfoPort=v}"
			  		></port>
			  </el-tab-pane>
			  
			  <el-tab-pane :disabled="isClone" v-if="!(tabHideList.indexOf('4')>-1)" name="4" label="环境变量" style="padding: 20px;">
			  	<env
			  		ref="env"
			  		@change="(name,v)=>{formData.varsInfoEnv=v}"
			  		></env>
			  </el-tab-pane>
			  
			  <el-tab-pane :disabled="isClone" v-if="!(tabHideList.indexOf('5')>-1)" name="5" label="卷挂载" style="padding: 20px;">
			  	<volume
			  		ref="volume"
			  		@change="(name,v)=>{formData.varsInfoVolume=v}"
			  		></volume>
			  </el-tab-pane>
			  
			  <el-tab-pane :disabled="isClone" v-if="!(tabHideList.indexOf('6')>-1)" name="6" label="日志输出" style="padding: 20px;">
			  	<el-alert
			  		title=""
			  		 style="font-size: 12px;">
			  		用于系统收集应用运行输出日志。
			  	</el-alert>
			  	<el-table :data="[{}]" style="width: 100%">
			      <el-table-column label="日志"  >
			        <template slot-scope="scope">
			        	{{scope.row.log}}
			        	<el-input v-model="formData.varsInfoLog[0].varsValue" ></el-input>
			        </template>
			      </el-table-column>
			    </el-table>
			  </el-tab-pane>
			  
			  <el-tab-pane :disabled="isClone" v-if="!(tabHideList.indexOf('7')>-1)" name="7" label="关联应用" style="padding: 20px;">
			  	<activeTemplate
			  		ref="activeTemplate"
			  		:onDeploy="true"
			  		@change="(name,v)=>{formData.relaInfo=v}"
			  		>
			  	</activeTemplate>
			  </el-tab-pane>
			</el-tabs>
  </div>
</template>


<script>
import baseInput from "@/view/components/input/input";
import jiqunSelect from "@/view/components/select/jiqunSelect";
import zhujiIpTransfer from "@/view/components/transfer/zhujiIpTransfer"
import shiliGuigeRadio from "@/view/components/radio/shiliGuigeRadio"
import configFile from "../common/configFile";
import port from "../common/port";
import env from "../common/env";
import volume from "../common/volume";
import activeTemplate from "../common/activeTemplate";
import deployModel from "../common/deployModel";

export default {
	props: [
		"deployTypeProp",
		"templateTypeProp",
		"isClone"
	],
	components: {
		baseInput,
		jiqunSelect,
		zhujiIpTransfer,
		shiliGuigeRadio,
		configFile,
		port,
		env,
		volume,
		activeTemplate,
		deployModel,
	},
	data() {
		return {
			deployType: 1,
			templateType: 1,
			activeTab: 0,
			tabHideList: [],
			formData: {
				deployInstCounts: 1,
				appName: "",
				clusterName: "",
				needips: true,
				ips: [],
				disabledIps: [],
				ipsString: "", // 用于验证
				varsInfoShili: [{}],
				varsInfoPort: [],
				varsInfoEnv: [],
				varsInfoVolume: [],
				varsInfoLog: [{
					nullAble: 1,
					varsName: "LOG_PATH",
					varsType: 5,
					varsValue: "",
				}],
				varsInfo: [],
				templateConfigs: [],
			},
			fromRule: {
				appName: [{ required: true, message: '请输入应用名', trigger: 'blur' },],
				clusterName: [{ required: true, message: '请选择所属集群', trigger: 'change' },],
			},
		}
	},
	watch: {
		'formData.varsInfoShili'(n, o) {
			this.concatVarsInfo()
		},
		'formData.varsInfoPort'(n, o) {
			this.concatVarsInfo()
		},
		'formData.varsInfoEnv'(n, o) {
			this.concatVarsInfo()
		},
		'formData.varsInfoVolume'(n, o) {
			this.concatVarsInfo()
		},
		'formData.varsInfoLog.varsValue'(n, o) {
			this.concatVarsInfo()
		},
	},
	mounted() {
		this.initTypes();
	},
	methods: {
		initTypes(opt, tabHideList) {
			this.tabHideList = tabHideList || [];
			this.deployType = opt && opt.deployType ? opt.deployType : this.deployTypeProp;
			this.templateType = opt && opt.templateType ? opt.templateType : this.templateTypeProp;

			if (this.templateType && this.templateType == 2) {// 组件
				this.tabHideList = this.tabHideList.concat(["1", "2", "3", "5", "6", "7"]);
			} else if (this.deployType == 2) { // 裸应用
				this.tabHideList = this.tabHideList.concat(["1", "3", "5"]);
			} else if (this.deployType == 2 && this.isClone == true) { // 克隆
				this.tabHideList = this.tabHideList.concat(["1", "2","3","4", "5","6","7", "9"]);
			} else {

			}

			this.formData.needips = this.getIps(this.formData.ips, this.templateType, this.deployType)
			this.changeDeployFormRules(this.formData.needips);
		},
		getIps(ips, templateType, deployType) {
			if (templateType && templateType == 2) {// 组件
				return false;
			} else if (deployType == 2) { // 裸应用
				return false;
			} else {// 容器
				return ips && ips.length ? false : true;
			}
		},
		initConfigs(formData, isHistory) {

			if (formData) {
				this.activeTab = "0";
				const needipsFormData = this.getIps(formData.ips, formData.templateType, formData.deployType);

				this.formData = {
					appType: formData.appType || "",
					deployModel: formData.deployModel,
					deployInstCounts: formData.deployInstCounts || "",
					templateId: formData.templateId || "",
					appName: formData.appName || "",
					clusterId: formData.clusterId || "",
					clusterName: formData.clusterName || "",
					needips: needipsFormData,
					ipsString: formData.ips ? formData.ips.join(",") : "", // 用于验证
					varsInfoShili: formData.varsInfoShili || [{}],
					varsInfoPort: formData.varsInfoPort || [],
					varsInfoEnv: formData.varsInfoEnv || [],
					varsInfoVolume: formData.varsInfoVolume || [],
					varsInfoLog: formData.varsInfoLog || [{
						nullAble: 1,
						varsName: "LOG_PATH",
						varsType: 5,
						varsValue: "",
					}],
					varsInfo: formData.varsInfo || [],
					templateConfigs: formData.templateConfigs || [],
				};

				console.log("向部署配置 模块整体注入data")
				console.log(JSON.stringify(formData), JSON.stringify(formData.templateConfigs))
				//					console.log("后的form 值")
				//					console.log(JSON.stringify(this.formData)  ,  JSON.stringify(this.formData.templateConfigs))
			}

			let varsInfoPort = this.formData.varsInfoPort || [],
				varsInfoEnv = this.formData.varsInfoEnv || [],
				varsInfoVolume = this.formData.varsInfoVolume || [];
			if (this.formData.varsInfo && this.formData.varsInfo.length && !isHistory) {
				this.formData.varsInfo.forEach(el => {
					switch (Number(el.varsType || el.envType)) {
						case 1:
							varsInfoEnv.push(el)
								; break;
						case 2:
							varsInfoPort.push(el)
								; break;
						case 4:
							varsInfoVolume.push(el)
								; break;
					}
				})
			}
			let dataCopy = JSON.parse(JSON.stringify(this.formData))
			setTimeout(() => {
				this.formData = dataCopy;
				this.$refs.deployModel && this.$refs.deployModel.initDefaultValue(this.formData.deployModel).initdeployModelList(this.formData.appType)

				this.$refs.zhujiIpTransfer.initData({
					clusterId: this.formData.clusterId,
					templateId: this.formData.templateId,
				})

				this.$refs.configFile && this.$refs.configFile.initData(this.formData.templateConfigs);
				this.$refs.env && this.$refs.env.initData(varsInfoEnv);
				this.$refs.port && this.$refs.port.initData(varsInfoPort);
				this.$refs.volume && this.$refs.volume.initData(varsInfoVolume);

				this.$refs.activeTemplate && this.$refs.activeTemplate.initData(this.formData.relaInfo);

				if (formData) {
					this.formData.ips = formData.ips || [];
					this.formData.disabledIps = formData.disabledIps || [];
				}
			}, 200)

		},

		concatVarsInfo() {
			this.formData.varsInfo = [
				...this.formData.varsInfoShili,
				...this.formData.varsInfoPort,
				...this.formData.varsInfoEnv,
				...this.formData.varsInfoVolume,
				...this.formData.varsInfoLog,
			]
		},

		changeJQ(name, v, selectedArr) {
			// console.log("集群change",name,v,selectedArr)
			if (typeof (v) == "string" || !selectedArr || !selectedArr[0]) {
				return;
			}
			this.formData.clusterName = selectedArr[0].label;
			this.formData.clusterId = selectedArr[0].value;
			if (this.$refs.zhujiIpTransfer) {
				this.$refs.zhujiIpTransfer.initData({
					clusterId: selectedArr[0].value,
					templateId: this.formData.templateId,
				})
				this.formData.ips = [];
			}
		},
		changeDeployFormRules(v) {
			if (!v) {
				// ip 选择
				this.fromRule.ipsString = [{ required: true, message: '请选择ip', trigger: 'change' },];
			} else {
				// ip 自动
				this.fromRule.ipsString = null;
			}
		},

		validateForm(callbacks) {
			let hasValidErr;
			for (let i in this.$refs) {
				const ref = this.$refs[i];
				if (ref) {
					let fn = ref.validate || ref.validateDeploy || null;
					//ref.resetFields&&ref.resetFields();
					if (fn && !hasValidErr) {
						fn((valid) => {
							if (valid) {
								// console.log('sucess submit!!' , i );
							} else {
								const errIndex = {
									"deployForm": "0",
									"configFile": "2",
									"port": "3",
									"env": "4",
									"volume": "5",
								}[i]

								if (this.tabHideList.indexOf(errIndex) == -1) {
									hasValidErr = true;
									this.activeTab = errIndex;
									//console.error('error submit!' , i);
									if (callbacks && callbacks.onError) {
										callbacks && callbacks.onError(i)
									}
									return false;
								}
							}
						})
					}
				}
			}
			if (!hasValidErr && callbacks && callbacks.onSuccess) {
				// 验证成功
				callbacks && callbacks.onSuccess(this.formData)
			}
		},
		getFormData() {
			return this.formData;
		},

	},
}
</script>


<style>
</style>